<template>
  <div class="cate">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 添加分类按钮区域 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="openAddDialog">
            添加分类
          </el-button>
        </el-col>
      </el-row>

      <!-- 树形表格组件的使用 -->
      <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index
        index-text="序号" border :show-row-hover="false">
        <!-- 是否有效列 -->
        <template slot="isDelete" slot-scope="scope">
          <i v-if="!scope.row.cat_deleted" style="color:lightgreen" class="el-icon-success"></i>
          <i class="el-icon-error" style="color:red" v-else></i>
        </template>
        <!-- 排序列 -->
        <template slot="sort" slot-scope="scope">
          <el-tag :style="{ 'margin-left': scope.row.cat_level * 20 + 'px' }" size="mini"
            v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag size="mini" v-else-if="scope.row.cat_level === 1" type="success"
            :style="{ 'margin-left': scope.row.cat_level * 20 + 'px' }">二级</el-tag>
          <el-tag size="mini" v-else type="warning"
            :style="{ 'margin-left': scope.row.cat_level * 20 + 'px' }">三级</el-tag>
        </template>
        <!-- 操作列 -->
        <template slot="opt" slot-scope="scope">
          <el-button @click="openEditDialog(scope.row)" size="mini" icon="el-icon-edit" type="primary">编辑</el-button>
          <el-button @click="cateDel(scope.row)" size="mini" icon="el-icon-delete" type="danger">删除</el-button>
        </template>
      </tree-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </el-card>
    <!-- 分类添加和修改 -->
    <cate-edit :list="list" ref="cateEditRef" @on-cate-add="handleCateAdd"></cate-edit>
  </div>
</template>

<script>
import Cate from './cate.js'
export default {
  ...Cate
}
</script>

<style lang="scss" scoped>
.zk-table {
  margin-top: 15px;
}
</style>